<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    table{
      border-collapse: collapse;
    }
    #span{
      font-weight: bold;
      color: red;
    }
  </style>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
    $(function () {
      //发送Ajax请求
      $.post("www/ScoreServlet?method=findAll",function (f) {
        $("#tb").empty();//数据清空
        //进行遍历
        $.each(f,function (i, e) {

          var zf=e.first+e.second;//总分=理论成绩+机试成绩

          if(zf<60){//如果总分小于60分，则执行id='span'标签，并标红
            zf="<span id='span'>"+zf+"</span>"
          }else {
            zf="<span>"+zf+"</span>"
          }

          $("#tb").append('<tr>\n' +
                  '    <th>'+ e.sid +'</th>\n' +
                  '    <th>'+ e.sname +'</th>\n' +
                  '    <th>'+ e.first +'</th>\n' +
                  '    <th>'+ e.second +'</th>\n' +
                  '    <th>'+ zf +'</th>\n' +
                  '    <th>'+ e.room.rname +'</th>\n' +
                  '  </tr>')
        })
      },"json")
    })
  </script>
</head>
<body>

<a href="add.html">录入学员成绩</a>
<table border="1px">
  <tr>
    <th>编号</th>
    <th>姓名</th>
    <th>理论成绩</th>
    <th>机试成绩</th>
    <th>总分</th>
    <th>所在班级</th>
  </tr>
  <tbody id="tb">
  </tbody>
</table>
</body>
</html>